<script lang="ts">
export default {
    name: 'DialogView'
};
</script>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { VITE_APP_IMAGE_BASE_URL as baseImage } from '@/utils/base';
import { getIncludeType } from '@/utils/utils';

const props = defineProps({
    dialog: {
        required: true,
        type: Object,
        default: {}
    },
    fileList: {
        type: Object,
        default: () => []
    },
})

const { dialog } = props
const { fileList } = toRefs(props)

/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {

}


/**
 * 表单提交
 */
function handleSubmit() {

}




onMounted(() => {

});
</script>

<template>
    <div>
        <!--列表图片预览-->
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" @close="closeDialog">
            <div v-if="fileList">
                <el-carousel ref="carouselRef" trigger="click" height="600px" :autoplay="false">
                    <el-carousel-item class="view-box" v-for="item in fileList" :key="item">
                        <img v-if="!getIncludeType(item.url)" :src="item.url" alt="">
                        <video v-else :src="item.url" autoplay muted loop></video>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button type="primary" @click="handleSubmit">确 定</el-button> -->
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.view-box {
    width: 100%;

    img {
        width: 100%;
    }

    video {
        width: 100%;
    }
}
</style>
